<template>
  <div class='dashboard-container'>
    <div class="app-container">
      <el-card shadow="never">
        <el-form>
          <div class="filter-container">
            <el-row>
              <el-col :span="12">
                 <el-form-item label="学科名称">
                  <el-input
                  style="width: 200px;margin-right: 10px"
                  class="filter-item"
                  v-model="form.subjectName"
                  placeholder=""
                  ></el-input>
                  <el-button class="filter-item" @click="clear">清除</el-button>
                  <el-button class="filter-item" type="primary" @click="search">搜索</el-button>
                </el-form-item>
              </el-col>
                <el-col :span="12" style="text-align: right">
                  <el-form-item>
                    <el-button type="success" class="el-icon-edit" @click="handleOpen(null,1)">新增学科</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
          </div>
        </el-form>
        <el-alert
        type="info"
        show-icon
        :title="alertText"
        ></el-alert>
        <el-table
          :header-cell-style="{background: '#fafafa'}"
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            fixed
            align="center"
            type="index"
            :index="indexFn"
            prop="id"
            label="序号"
            width="150">
          </el-table-column>
          <el-table-column
            fixed
            align="center"
            prop="subjectName"
            label="学科名称"
            width="160">
          </el-table-column>
          <el-table-column
            fixed
            align="center"
            prop="username"
            label="创建者"
            width="160">
          </el-table-column>
          <el-table-column align="center" label="创建日期" width="260">
            <template #default="{row}">
              {{formatDate(row.addDate)}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="前台是否显示"  width="160">
            <template #default="{row}">
              {{format(row.isFrontDisplay)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            align="center"
            label="二级目录"
            width="160">
          </el-table-column>
          <el-table-column
            prop="tags"
            align="center"
            label="标签"
            width="160">
          </el-table-column>
          <el-table-column
            prop="totals"
            align="center"
            label="题目数量"
            width="110">
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="250">
            <template #default="{row}">
              <el-button type="text" size="small" @click="skipDirectorys(row.id,row.subjectName)">学科分类</el-button>
              <el-button type="text" size="small" @click="skipTags(row.id,row.subjectName)">学科标签</el-button>
              <el-button type="text" size="small" @click="handleOpen(row,2)">修改</el-button>
              <el-button type="text" size="small" @click="handleDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="height: 40px; margin-top: 20px">
          <el-pagination
            background
            style="text-align: right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-sizes="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
            :page-size="form.pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="counts">
          </el-pagination>
        </div>
        <add-subjects ref="add" :tableData="tableData" :showDialog.sync="showDialog"  @add-subjects="getList"></add-subjects>
      </el-card>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import AddSubjects from '../components/subjects-add.vue'
import { list, remove } from '@/api/hmmm/subjects.js'
export default {
  components: {
    AddSubjects
  },
  data () {
    return {
      alertText: '', // alert文字
      tableData: [], // 表格数据
      form: {
        page: 1, // 当前页码
        pagesize: 10, // 每页条数
        subjectName: '' // 学科名称
      },
      counts: 0, // 总记录数
      showDialog: false // 是否展示新增学科对话框
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 当前页的条数改变
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.form.pagesize = val
      this.form.page = 1
      this.getList()
    },
    // 当前页码改变
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.form.page = val
      this.getList()
    },
    // 序号改变
    indexFn (index) {
      return index + 1 + this.form.pagesize * (this.form.page - 1)
    },
    // 获取学科列表
    async getList () {
      const { data: { items, counts } } = await list(this.form)
      // console.log(res)
      this.tableData = items
      this.counts = counts
      // this.pages = pages
      this.alertText = `数据一共${this.counts}条`
    },
    // 删除学科
    handleDel (id) {
      this.$confirm('此操作将永久删除该学科，是否继续？', '温馨提示', { type: 'warning' }).then(async () => {
        await remove(id)
        this.$message.success('删除学科成功')
        this.getList()
      }).catch(() => {})
    },
    // 跳转到学科目录
    skipDirectorys (id, name) {
      this.$router.push({
        path: 'directorys',
        query: {
          id,
          name
        }
      })
    },
    // 跳转到学科标签
    skipTags (id, name) {
      this.$router.push({
        path: 'tags',
        query: {
          id,
          name
        }
      })
    },
    // 格式化时间
    formatDate (value, str = 'YYYY-MM-DD hh:mm:ss') {
      return dayjs(value).format(str)
    },
    // 格式化前台是否显示
    format (value) {
      const types = {
        1: '是',
        0: '否'
      }
      return types[value]
    },
    // 打开新增修改学科对话框
    handleOpen (row, type) {
      this.showDialog = true
      if (type === 2) {
        this.$refs.add.getDetail(row)
      }
    },
    // 清除功能
    clear () {
      this.form.subjectName = ''
    },
    // 搜索功能
    search () {
      this.form.page = 1
      this.getList()
    }
  }
}
</script>

<style scoped lang='scss'></style>
